import React, { useState, useEffect, useCallback } from 'react'
import { getSysDepartmentFindList, getSysUserSelected } from '../../../../../../Api/listUrl';
import { Form, Button, Select, Row, Col, message } from "antd";

const { Option } = Select;

/**
 * @description: 费用反馈 -- 反馈列表 -- 搜索组件
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-15） 创建页面
 */

const SelectModule = ({ handleSelectModuleOk, handleSelectModuleReset }) => {
    const [form] = Form.useForm()
    const { resetFields } = form;
    const [departmentList, setDepartmentList] = useState([]); //部门list
    const [userList, setUserList] = useState([]); //人员list
    const departmentFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysDepartmentFindList();
                if (code === '20000') {
                    setDepartmentList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected();
                if (code === '20000') {
                    setUserList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        departmentFun();
        userFun();
    }, [departmentFun, userFun])
    const handleReset = () => {
        resetFields()
        handleSelectModuleReset()
    }
    const onFinish = (values) => {
        handleSelectModuleOk(values)
    };
    return <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        form={form}
    >
        <Row>
            <Col span={6}>
                <Form.Item name="result" label="办事结果" hasFeedback>
                    <Select placeholder="请选择办事结果">
                        <Option value={0}> 未完成 </Option>
                        <Option value={1}> 已完成 </Option>
                    </Select>
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="situation" label="费用情况" hasFeedback>
                    <Select placeholder="请选择费用情况">
                        <Option value={0}> 正常 </Option>
                        <Option value={1}> 非正常 </Option>
                    </Select>
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="assumeDep" label="承担部门" hasFeedback>
                    <Select placeholder="请选择规则状态">
                        {
                            departmentList.map(item => <Option value={item.id} key={item.id}> {item.name} </Option>)
                        }
                    </Select>
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="assumeMain" label="承担人员" hasFeedback>
                    <Select placeholder="请选择承担人员">
                        {
                            userList.map(item => <Option value={item.id} key={item.id}> {item.name} </Option>)
                        }
                    </Select>
                </Form.Item>
            </Col>
        </Row>
        <Row>
            <Col span={24} className="bottom_button_box">
                <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                    <Button onClick={handleReset}>重置</Button>
                </Form.Item>
            </Col>
        </Row>
    </Form>
}
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 },
};
export default SelectModule